<template>
	<view>
		<!-- 收入结构 -->
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">收入结构</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="structure" id="structure" class="charts-pie" @touchstart="touchColumn" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>

		<!-- 住院收入 -->
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">住院收入</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="hospitalization" id="hospitalization" @touchstart="touchColumn" @touchmove="moveLineA" class="charts-pie"
			 :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>

		<!-- 收入环比 -->
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">收入环比</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="chainratio" id="chainratio" @touchstart="touchColumn" @touchmove="moveLineA" class="charts-pie"
			 :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>
	</view>
</template>
<script>
	import uCharts from '@/components/u-charts/u-charts.js'
	var _this;
	var Structure = null;
	var Hospitalization = null;
	var ChainRatio = null
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				StructureList: {
					series: [{
						"name": "药品费",
						"data": 20
					}, {
						"name": "医务性收入",
						"data": 30
					}, {
						"name": "卫材收入",
						"data": 25
					}, {
						"name": "检查化验收入",
						"data": 25
					}]
				},
				HospitalizationList: {
					categories: ["2018", "2019", "2020"],
					series: [{
						"name": "药品收入占比",
						"data": [20, 30, 10]
					}, {
						"name": "卫材收入占比",
						"data": [10, 15, 20]
					}, {
						"name": "检查化验收入占比",
						"data": [5, 15, 30]
					}, {
						"name": "医务性收入占比",
						"data": [10, 15, 25]
					}]
				},
				ChainRatio: {
					categories: ['01', '02', '03', '04', '05', '06'],
					series: [{
						"name": "药品收入",
						"data": [120, 132, 101, 134, 90, 230]
					}, {
						"name": "卫材收入",
						"data": [220, 182, 191, 234, 290, 330]
					}, {
						"name": "检查化验收入",
						"data": [150, 232, 201, 154, 190, 330]
					}, {
						"name": "医务性收入",
						"data": [320, 332, 301, 334, 390, 330]
					}]
				}
			}
		},
		onLoad() {
			_this = this;
			this.cWidth = uni.upx2px(750)
			this.cHeight = uni.upx2px(500)
			this.refreshList();
		},
		methods: {
			refreshList() {
				_this.IncomeStructure("structure", this.StructureList)
				_this.IncomeHospitalization("hospitalization", this.HospitalizationList)
				_this.IncomeChainRatio("chainratio", this.ChainRatio)
			},
			// 收入结构
			IncomeStructure(canvasId, chartData) {
				Structure = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					legend: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							lableWidth: 15
						}
					}
				})
			},

			// 住院收入
			IncomeHospitalization(canvasId, chartData) {
				Hospitalization = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'column',
					legend: true,
					fontSize: 11,
					dataLabel: false, // 隐藏数据点标签
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					animation: true,
					enableScroll: true, // 开启图表拖拽功能
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true, // 绘制Y坐标轴网格
						itemCount: 5, // x轴单屏显示数据的数量，默认为5个
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						//disabled:true
					},
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					extra: {
						column: {
							type: 'stack',
							width: _this.cWidth * _this.pixelRatio * 0.5 / chartData.categories.length
						}
					}
				})
				this.piearr = Hospitalization.opts.series;
			},

			// 收入环比
			IncomeChainRatio(canvasId, chartData) {
				ChainRatio = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						// min: 10,
						// max: 180,
						// format: (val) => {
						// 	return val.toFixed(0) + '元'
						// }
					},
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				})
				this.piearr = ChainRatio.opts.series;
			},
			// 触摸
			touchColumn(e) {
				if (e.target.id === "structure") {
					Structure.showToolTip(e, {
						format: function(item, category) {
							if (typeof item.data === 'object') {
								return item.name + ':' + item.data.value
							} else {
								return item.name + ':' + item.data
							}
						}
					})
				} else if (e.target.id === "hospitalization") {
					Hospitalization.scrollStart(e)
					Hospitalization.scrollEnd(e)
					Hospitalization.showToolTip(e, {
						format: function(item, category) {
							if (typeof item.data === 'object') {
								return item.name + ':' + item.data.value
							} else {
								return item.name + ':' + item.data
							}
						}
					})
				} else if (e.target.id === "chainratio") {
					ChainRatio.scrollStart(e)
					ChainRatio.scrollEnd(e)
					ChainRatio.showToolTip(e, {
						format: function(item, category) {
							if (typeof item.data === 'object') {
								return item.name + ':' + item.data.value
							} else {
								return item.name + ':' + item.data
							}
						}
					})
				}
			},

			// 触摸移动
			moveLineA(e) {
				Hospitalization.scroll(e)
			}
		}
	}
</script>

<style scoped lang="less">
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
